<template>
<div>
  <header>
    <span>处理状态：</span>
    <Select v-model="queryData.actionType" style="width:200px">
      <Option v-for="item in actionType" :value="item.id" :key="item.id">{{ item.type }}</Option>
    </Select>
    <span>工号查询:</span>
    <Input v-model="queryData.account" placeholder="请输入工号名称" style="width: 200px"/>
    <Button type="primary" @click="query">查询</Button>
    <Button @click="reset" class="reset">重置</Button>
  </header>
  <div>
    <Table stripe :columns="columns1" :data="data1">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot="action" slot-scope="{ row, index }">
        <Button v-if="row.status=='未处理'" type="success" @click="agree(index)" size="small">同意</Button>
        <Button v-if="row.status=='未处理'" type="primary" @click="refuse(index)" size="small">拒绝</Button>
        <Button v-if="row.status=='已拒绝'" type="success" @click="detail(index)" size="small">查看拒绝理由</Button>
      </template>
    </Table>
  </div>
  <div style="margin: 10px;overflow: hidden">
    <div style="float: right;">
      <Page :total="100" :current="queryData.currentPage" @on-change="changePage"  @on-page-size-change="changeSize" show-elevator show-sizer></Page>
    </div>
  </div>

  <Modal
    v-model="modal1"
    title="拒绝理由"
    @on-ok="ok"
    ok-text="发送"
    @cancel="cancel"
    cancel-text="返回"
    width="500"
  >
    <Input v-model="updateData.message" type="text" style="width: 450px"></Input>
  </Modal>
</div>
</template>

<script>
import {
  deleteViolationRecord,
  getAllViolationType, getApplyListByQuery,
  getErrorAppealSolutionList,
  getViolationImage, sendFeedbackInformation, updateApplyRecord
} from "../../api/data";

export default {
  name: "car-apply",
  data() {
    return {
      name: '',
      modal1: false,
      modal2: false,
      imgSrc: '',
      text: '',
      selected: '',
      queryData: {
        actionType: '0',
        account: '',
        page:'1',
        limit:'10'
      },
      actionType: [
        {
          id: 3,
          type: "全部",
        },
        {
          id: 0,
          type: "未处理",
        },
        {
          id: 1,
          type: "已同意",
        },
        {
          id: 2,
          type: "已拒绝",
        }
      ],
      violateType: [],
      columns1: [
        {
          title: '申请编号',
          key: 'applyId',
          align: "center",
          width: 100
        },
        {
          title: '用户账号',
          key: 'account',
          align: "center"
        },
        {
          title: '车牌号',
          key: 'carId',
          align: "center"
        },
        {
          title: '电话',
          key: 'phone',
          align: "center"
        },
        {
          title: '状态',
          key: 'status',
          align: "center"
        },
        {
          title: '申请时间',
          key: 'applyTime',
          align: "center"
        },
        {
          title: '处理时间',
          key: 'updateTime',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          slot: 'action',
          align: 'center'
        }
      ],
      data1: [
        {
          applyId: '1',
          account: '123456',
          carId: '浙C1D6S7',
          phone: '1236751276',
          status: '未处理',
          reback: '同意',
          applyTime: '2022-02-13 18:12:42',
          updateTime: '2022-02-25 14:00:48'
        },
        {
          applyId: '2',
          account: '123456',
          carId: '浙C1D6S7',
          phone: '1236751276',
          status: '已拒绝',
          reback: '同意',
          applyTime: '2022-02-13 18:12:42',
          updateTime: '2022-02-25 14:00:48'
        }
      ],
      updateData: {
        id: '',
        message: '',
        status: '',
      }
    }
  },
  methods: {
    changePage(pageNumber) {
      this.queryData.page = pageNumber
      this.queryList()
    },
    changeSize(pageSize) {
      this.queryData.limit = pageSize
    },

    agree(index) {
      this.selected=index
      this.updateData.id=this.data1[index].applyId;
      this.updateData.status="1";
      updateApplyRecord(this.updateData).then(res=>{
        this.$Message.info("修改成功");
      }).catch(err=>{
        alert(err.message())
      })
    },

    ok() {
      this.updateData.id=this.data1[this.selected].applyId;
      this.updateData.status="2";
      updateApplyRecord(this.updateData).then(res=>{
        this.$Message.info("拒绝成功");
      }).catch(err=>{
        alert(err.message())
      })
    },
    query() {
      getApplyListByQuery(this.queryData).then(res =>{
        this.data1=res.data.obj
      }).catch(err =>{
        alert(err.message())
      })
    },


    submit(){
      sendFeedbackInformation(this.data1[this.selected].ueappealId,this.text).then(res=>{
        if(res.data.code==200){
          this.$Message.info("反馈信息添加成功");
        }
      }).catch(err =>{
        alert(err.message())
      })
      this.query()
    },
    click() {

    },
    reset() {

    },
    refuse(index) {
      this.selected=index
      this.modal1 = true
    },

    detail(index) {
      this.selected=index
      this.updateData.message=this.data1[index].reback;
      this.modal1 = true
    },
    cancel(){
      this.modal1 = false
      this.modal2 = true
    },
    reback() {
      this.modal1 = false;
      this.modal2 = true;
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
Button{
  margin-left: 10px;
}
</style>
